<template>
	<view style="padding-bottom: 60px;" v-if="goods.length>0">
		<view class="goods" v-for="(item,index) in goods" key="index">
			<view class="left">
				<view class="goodsLeft">
					<checkbox-group @change="selected($event,item)">
						<label>
							<checkbox :checked="item.flag" />
						</label>
					</checkbox-group>
					<image style="width: 150rpx; height: 140rpx; margin-left: 10px;" :src="item.goodsImage"></image>
				</view>
				<view class="size">
					<text style="font-size: 25rpx;">名称:{{item.goodsName}}</text>
					<text style="font-size: 25rpx;">规格:{{item.specsName}}</text>
					<text class="goodsPrice">{{item.price}}元/{{item.goodsUnit}}</text>
				</view>
			</view>
			<view class="right">
				<text class="subtract" @click="reduce(item)">-</text>
				<text class="num">{{item.num}}</text>
				<text class="add" @click="add(item)">+</text>
			</view>
		</view>
	</view>
	<view class="footer">
		<view class="footerLeft">
			<checkbox-group @change="selectAll">
				<label>
					<checkbox :checked="allchecked" />全选
				</label>
			</checkbox-group>
			<view>
				总计:<text style="color: #f00;font-weight: bold;">{{totalPrice}}元</text>
			</view>
		</view>
		<view class="footerRight" @click="confirm()">
			结算({{totalNum}})
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed
	} from 'vue';
	import { orderStore } from '../../store/order';
	import { carStore } from '../../store/car';
	//获取car的store
	const store = carStore()
	const ostore = orderStore()
	const show = ref(true)
	const allchecked = ref(true)
	const checked = ref(true)
	//获取购物车数据
	const goods = computed(()=>{
		if(store.carList.length == 0){
			allchecked.value = false
		}else{
			allchecked.value = true
		}
		return store.carList
	})
	//复选框点击事件
	const selected = (e,item)=>{
		if(item.flag == true){
			item.flag = false
		}else{
			item.flag = true
		}
		//全选的设置
		//找出选中的数据
		let arr = store.carList.filter(item =>(item.flag == true))
		if(arr.length == store.carList.length){
			allchecked.value = true
		}else{
			allchecked.value = false
		}
	}
	//全选点击事件
	const selectAll = ()=>{
		if(allchecked.value==true){
			allchecked.value = false
			store.carList.forEach(item =>{
				item.flag = false
			})
		}else{
			allchecked.value = true
			store.carList.forEach(item =>{
				item.flag = true
			})
		}
	}
	//购物车结算的减事件实现
	const reduce = (item)=>{
		let num = item.num
		if(num > 1){
			num -= 1
		}else if(num == 1){
			store.carList.map((dom,i)=>{
				if(dom.goodsId == item.goodsId){
					store.carList.splice(i,1)
				}
			})
		}
		item.num = num
		if(store.carList.length == 0){
			allchecked.value = false
		}
	}
	//购物车结算的加事件实现
	const add = (item)=>{
		let num = item.num
		item.num = num + 1
	}
	//总数
	const totalNum = computed(()=>{
		let totalNum = 0;
		store.carList.map(item=>{
			item.flag ? totalNum += item.num : totalNum += 0
		})
		return totalNum
	})
	//总价
	const totalPrice = computed(()=>{
		let totalPrice = 0;
		store.carList.map(item=>{
			item.flag ? totalPrice += item.num*item.price : totalPrice += 0
		})
		return totalPrice
	})
	//跳转到订单页面
	const confirm = (item)=>{
		//清空
		ostore.orderList = []
		//如果没有数据
		if(store.carList.length == 0){
			uni.showToast({
				icon:'none',
				title:'请选择菜品'
			})
			return
		}
		//设置确定订单数据
		ostore.addOrderList(store.carList)
		uni.navigateTo({
			url:'../order/order'
		})
	}
</script>

<style lang="scss">
	.goods {
		display: flex;
		padding: 30rpx 15rpx 30rpx 30rpx;
		background-color: #fff;
		justify-content: space-between;
		border-bottom: 5rpx solid #f1f1f1;
		align-items: center;

		.left {
			display: flex;

			.goodsLeft {
				display: flex;
				align-items: center;
			}

			.size {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				margin-left: 20rpx;

				.goodsPrice {
					font-size: 25rpx;
					color: #f44545;
				}
			}
		}

		.right {
			text{
				width: 50rpx;
				line-height: 50rpx;
				text-align: center;
				display: inline-block;
				background-color: #f7f7f7;
				margin-right: 10rpx;
			}
			.add{
				color: #fa4305;
				border-radius: 10rpx 30rpx 30rpx 10rpx;
				margin-right: 20rpx;
			}
			.subtract{
				border-radius: 30rpx 10rpx 10rpx 30rpx;
			}
		}
	}
	.footer{
		width: 100%;
		height: 90rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
	}
	
	.footerLeft{
		width: 70%;
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;
	}
	.footerRight{
		width: 30%;
		line-height: 90rpx;
		background-color: lightgreen;
		text-align: center;
		color: #fff;
	}
</style>